<!-- 网络拓扑 -->
<template>
  <div>
    <!-- 悬浮框 -->
    <div v-show="isShowInfoBox" class="infoBox" :style="{width:$store.state.language=='zh'?'18vw':'24vw'}">
      <a-collapse v-model="activeKey" v-if="networkData.length !== 0">
        <a-collapse-panel key="1" :header="$t('Brief_introduction')">
          <p v-for="(item, index) in networkData" :key="'net'+index">
            <i :style="{ background: item.color}" style="display: inline-block; width: 10px; height: 10px; margin-right: 1rem"></i>
            <b>{{ $store.state.language=='zh' ? item.ch_title : item.en_title}}： {{ item.segment }}</b>
          </p>
          <a-divider dashed />
          <div v-for="(item,index) in NetStatus" :key="'netStatus'+index">
            <div class="interface-sm-box">
              <div class="interface-sm">
                <div class="interface-top-box" :style="{'background-color':item.color}"></div>
                <div class="interface-bottom-box" :style="{'background-color':item.color,'border-top-color': item.color}"></div>
                <div class="interface-line interface-line-left"></div>
                <div class="interface-line interface-line-middle"></div>
                <div class="interface-line interface-line-right"></div>
              </div>
            </div>
            {{$store.state.language=='zh' ? item.ch_status : item.en_status}}
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>

    <div class="topology-canvas">
      <div class="net-tool-bar">
        <!-- 网络状态 -->
        {{$t('Net-status')}}:
        <div v-for="(item,index) in NetStatus" class="interface-sm-box" :key="index">
          <a-tooltip placement="top">
            <template slot="title">
              {{$store.state.language=='zh' ? item.ch_status : item.en_status}}
            </template>
            <div class="interface-sm">
              <div class="interface-top-box" :style="{'background-color':item.color}"></div>
              <div class="interface-bottom-box" :style="{'background-color':item.color,'border-top-color': item.color}"></div>
              <div class="interface-line interface-line-left"></div>
              <div class="interface-line interface-line-middle"></div>
              <div class="interface-line interface-line-right"></div>
            </div>
          </a-tooltip>
        </div>
        <!-- <span style="margin:0 15px 0 10px;color:#e6e6e6">|</span> -->
        <!-- 链路状态 -->
        <!-- {{$t('Link-status')}}: -->
        <!-- <a-tooltip placement="top">
          <template slot="title">
            {{$t('Connected')}}
          </template>
          <div class="link-status-box">
            <div class="link-solid-border green-link"></div>
            <div class="link-solid-border blue-link"></div>
            <div class="link-solid-border purple-link"></div>
          </div>
        </a-tooltip>
        <a-tooltip placement="top">
          <template slot="title">
            {{$t('Not-connected')}}
          </template>
          <div class="link-status-box">
            <div class="link-dashed-border green-link"></div>
            <div class="link-dashed-border blue-link"></div>
            <div class="link-dashed-border purple-link"></div>
          </div>
        </a-tooltip> -->
      </div>
      <!-- 网段 -->
      <div class="network-segment" 
        v-for="(item,index) in networkData"
        :key="'net'+index" 
        :style="{'background-color':item.color}"
      >
        <div class="network-segment-name">
          <a-checkbox :defaultChecked="true" @change="onChange(item.type, $event)">
            {{$store.state.language == 'zh' ? item.ch_title : item.en_title}}
            ({{$t('Network-segment')+item.segment}})
          </a-checkbox>
        </div>
      </div>

      <!-- 网线盒子 -->
      <div class="net-line-box">
        <!-- 垂直网线(间隔：45) -->
        <template v-for="(item,index) in nodeNum">
          <div :key="'vLine'+index">
            <!-- 管理网的线 -->
            <div
              v-show="manageLineShow"
              :class="(modeSelected.indexOf('manage_iface')==-1 && isPoint) ? 'un-point' : ''"
              :style="{left:'20px', top:76+'px', height:160+EACH_NODE_V_INTERVAL*index+'px', color:'var(--mainGreenColor)'}"
              class="net-line vertical-line solid-line"></div>
            <!-- 数据网的线 -->
            <div
              v-show="dataLineShow"
              :class="(modeSelected.indexOf('storage_iface')==-1 && isPoint) ? 'un-point' : ''"
              :style="{left:'30px', top:111+'px', height:116+EACH_NODE_V_INTERVAL*index+'px', color:'var(--themeColor)'}"
              class="net-line vertical-line solid-line"></div>
            <!-- 业务网的线 -->
            <div
              v-show="serviceLineShow"
              :class="(modeSelected.indexOf('business_iface')==-1 && isPoint) ? 'un-point' : ''"
              :style="{left:'40px', top:146+'px', height:70+EACH_NODE_V_INTERVAL*index+'px', color:'var(--mainPurpleColor)'}"
              class="net-line vertical-line solid-line"></div>
          </div>
          <!-- <div
            :key="'vline'+index"
            v-show="item.isShow"
            :style="{left:item.left, top:item.top, height:item.height}"
            :class="item.type"
            class="net-line vertical-line solid-line"
          >
          </div> -->
        </template>
        <!-- 横向网线(间隔：10) -->
        <template v-for="(item,index) in nodeNum">
          <div :key="'hLine'+index">
            <!-- 管理网的线 -->
            <div
              v-show="manageLineShow"
              :class="(modeSelected.indexOf('manage_iface')==-1 && isPoint) ? 'un-point' : ''"
              :style="{left:'20px', top:235+EACH_NODE_H_INTERVAL*index+'px', right:0, color:'var(--mainGreenColor)'}"
              class="net-line horizontal-line solid-line"></div>
            <!-- 数据网的线 -->
            <div
              v-show="dataLineShow"
              :class="(modeSelected.indexOf('storage_iface')==-1 && isPoint) ? 'un-point' : ''"
              :style="{left:'30px', top:225+EACH_NODE_H_INTERVAL*index+'px', right:0, color:'var(--themeColor)'}"
              class="net-line horizontal-line solid-line"></div>
            <!-- 业务网的线 -->
            <div
              v-show="serviceLineShow"
              :class="(modeSelected.indexOf('business_iface')==-1 && isPoint) ? 'un-point' : ''"
              :style="{left:'40px', top:215+EACH_NODE_H_INTERVAL*index+'px', right:0, color:'var(--mainPurpleColor)'}"
              class="net-line horizontal-line solid-line"></div>
          </div>
          <!-- <div
            :key="'hline'+index"
            v-show="item.isShow"
            :style="{top:item.top, left:item.left, right:item.right}"
            :class="item.type"
            class="net-line horizontal-line solid-line"
          > -->
          <!-- </div> -->
        </template>
      </div>
     
      <!-- 机器 -->
      <div class="machine-box" v-if="Object.keys(netData).length!=0">
        <div 
          v-for="(nodeInfo,key,index) in netData"
          :key="index"
          class="machine"
        >
          <!-- 两侧小图形 -->
          <div class="small-graphical left-graphical">
            <div class="small-circle"></div>
            <div class="small-circle"></div>
          </div>
          <div class="small-graphical right-graphical">
            <div class="small-circle"></div>
            <div class="small-circle"></div>
          </div>
          <!-- 网口 -->
          <div class="interface-box">
            <template v-for="(item,index2) in nodeInfo">
            <a-tooltip placement="bottom" :key="index2" @visibleChange="handleVisibleChange(item, $event)">
              <template slot="title">
                {{item.name}}
                <div>({{item.ipaddr}})</div>
              </template>
              <div class="interface">
                <div class="interface-top-box" :style="{'background-color':linkStatus[item.link_status]}"></div>
                <div class="interface-bottom-box" :style="{'background-color':linkStatus[item.link_status], 'border-top-color':linkStatus[item.link_status]}"></div>
                <div class="interface-line interface-line-left"></div>
                <div class="interface-line interface-line-middle"></div>
                <div class="interface-line interface-line-right"></div>
                <!-- 同一个网口中有多条线 -->
                <template v-if="item.children">
                  <template v-for="(child,index3) in item.children">
                    <div :key="index3">
                    <!-- 管理网的线 -->
                    <template v-if="child.role === 'manage_iface'">
                    <div
                      v-show="manageLineShow"
                      :class="(currentEthIP==item.ipaddr && isPoint) ? 'un-point' : ''"
                      style="left:8px;top:-10px;height:10px;color:var(--mainGreenColor)"
                      class="net-line vertical-line solid-line"></div>
                    </template>
                    <!-- 数据网的线 -->
                    <template v-if="child.role === 'storage_iface'">
                    <div
                      v-show="dataLineShow"
                      :class="(currentEthIP!=item.ipaddr && isPoint) ? 'un-point' : ''"
                      style="left:14px;top:-20px;height:20px;color:var(--themeColor)"
                      class="net-line vertical-line solid-line"></div>
                    </template>
                    <!-- 业务网的线 -->
                    <template v-if="child.role === 'business_iface'">
                    <div
                      v-show="serviceLineShow"
                      :class="(currentEthIP!=item.ipaddr && isPoint) ? 'un-point' : ''"
                      style="left:20px;top:-30px;height:30px;color:var(--mainPurpleColor)"
                      class="net-line vertical-line solid-line"></div>
                    </template>
                    </div>
                  </template>
                </template>
                <!-- 管理网的线 -->
                <template v-if="item.role === 'manage_iface'">
                <div
                  v-show="manageLineShow"
                  :class="(currentEthIP!=item.ipaddr && isPoint) ? 'un-point' : ''"
                  style="left:8px;top:-10px;height:10px;color:var(--mainGreenColor)"
                  class="net-line vertical-line solid-line"></div>
                </template>
                <!-- 数据网的线 -->
                <template v-if="item.role === 'storage_iface'">
                <div
                  v-show="dataLineShow"
                  :class="(currentEthIP!=item.ipaddr && isPoint) ? 'un-point' : ''"
                  style="left:14px;top:-20px;height:20px;color:var(--themeColor)"
                  class="net-line vertical-line solid-line"></div>
                </template>
                <!-- 业务网的线 -->
                <template v-if="item.role === 'business_iface'">
                <div
                  v-show="serviceLineShow"
                  :class="(currentEthIP!=item.ipaddr && isPoint) ? 'un-point' : ''"
                  style="left:20px;top:-30px;height:30px;color:var(--mainPurpleColor)"
                  class="net-line vertical-line solid-line"></div>
                </template>
                <!-- <template v-for="(item,index) in interfaceVerticalNetLine">
                  <div
                    :key="'vline'+index"
                    v-show="item.isShow"
                    :style="{left:item.left, top:item.top, height:item.height}"
                    :class="item.type"
                    class="net-line vertical-line solid-line"
                  >
                  </div>
                </template> -->
              </div>
            </a-tooltip>
            </template>
            <!-- <div class="interface">
              <template v-for="(item,index) in interfaceVerticalNetLine">
                <div
                  :key="'vline'+index"
                  v-show="item.isShow"
                  :style="{left:item.left, top:item.top, height:item.height}"
                  :class="item.type"
                  class="net-line vertical-line solid-line"
                >
                </div>
              </template>
            </div> -->
          </div>
          <!-- 节点信息 -->
          <div class="machine-detail">
            <span class="node-name">{{key}}</span>
            <!-- <div class="node-status status-success">健康</div> -->
          </div>
          <!-- ip地址 -->
          <!-- <div>(192.168.5.101)</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/request/request'

export default {
  name: "NetTopology",
  data() {
    return {
      manageLineShow: true,
      dataLineShow: true,
      serviceLineShow: true,
      isShowInfoBox: false,
      activeKey: ['1'],
      networkData: [
        {
          ch_title: '管理网',
          en_title: 'Management Network',
          segment: '-',
          color: 'var(--mainGreenColor)',
          type: 'manage_iface',
        },
        {
          ch_title: '数据网',
          en_title: 'Data Network',
          segment: '-',
          color: 'var(--themeColor)',
          type: 'storage_iface',
        },
        {
          ch_title: '业务网',
          en_title: 'Service Network',
          segment: '-',
          color: 'var(--mainPurpleColor)',
          type: 'business_iface',
        }
      ],
      netData: {
      },
      NetStatus: [
        {ch_status:'网络正常', en_status:'Network Normal', color: '#059db3'},
        {ch_status:'网络降级', en_status:'Network Degradation',color: '#d5aa12'},
        {ch_status:'网络中断', en_status:'Network Interruption',color: '#cf1b47'},
      ],
      linkStatus: {
        0: '#059db3', //正常，绿
        1: '#059db3', //网络降级，黄
        2: '#cf1b47', //网络中断，红
      },
      networkSegment: {
        manage_iface: '',
        business_iface: '',
        storage_iface: ''
      },
      nodeNum: 0,
      EACH_NODE_H_INTERVAL: 120, //每加一个机器后的【横向】网线的上下间隔差距 x*index
      EACH_NODE_V_INTERVAL: 120,//每增加一个机器后的【竖向】网线增加的差距 x*index
      currentEthIP: '', //当前鼠标经过的网口
      isPoint: '', //判断当前鼠标是否移入了网口
      modeSelected: [],//当前鼠标指向的网口包含的网段
    }
  },

  mounted() {
    this.getNetwork();
    window.addEventListener('scroll', this.onScroll, true)
  },

  methods: {
    //获取网段
    getNetwork() {
      request('get', 'machine/network/topology').then(res => {
        console.log('网络', res)
        if(res.status == 200 && res.data.flag!=1) {
          this.netData = res.data
          //计算网络数据中的节点数量
          this.nodeNum = Object.keys(this.netData).length;
          //取对象数组的第一个对象的数据，遍历拿到3个网段
          this.netData[Object.keys(this.netData)[0]].some(item => {
            this.networkSegment[item.role] = item.segmenet;
            console.log('aa', this.networkSegment)
            console.log('aa', this.networkSegment[item.role])

          })
          this.networkData[0].segment = this.networkSegment.manage_iface;
          this.networkData[1].segment = this.networkSegment.storage_iface;
          this.networkData[2].segment = this.networkSegment.business_iface;
        }
      })
    },

    //改变对应网段线条的显示与否
    onChange(value, e) {
      // console.log(value)
      // console.log(e)
      switch(value) {
        case 'manage_iface':
          this.manageLineShow = e.target.checked;
          break;
        case 'storage_iface':
          this.dataLineShow = e.target.checked;
          break;
        case 'business_iface':
          this.serviceLineShow = e.target.checked;
          break;
      }
    },

    //解决鼠标移入后，只显示当前网口的线
    handleVisibleChange(interfaceData, visible) {
      // console.log(interfaceData)
      // console.log(visible)
      this.isPoint = visible;
      if(visible) {
        this.currentEthIP = interfaceData.ipaddr;
        this.modeSelected = [];
        if(interfaceData.children) {
          interfaceData.children.forEach(item => {
            modeSelected.push(item.role);
          });
        }
        this.modeSelected.push(interfaceData.role);
      }else {
        this.currentEthIP = '';
        this.modeSelected = [];
      }
      
    },

    //监听滚动条事件
    onScroll() {
      // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
      let scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
      if(scrollTop > 215) {
        this.isShowInfoBox = true;
      }else {
        this.isShowInfoBox = false;
      }
    },
  },
}
</script>
<style scoped>
  .infoBox {
    position: fixed;
    z-index: 2;
    right: 0;
    top: 10%;
    /* height: 824px; */
    opacity: 0.9;
    background-color: #fff;
  }
  .topology-canvas {
    position: relative;
    width: calc(100vw - 245px);
    /* height: calc(100vh - 56px - 48px - 40px); */
    margin: 0 10px;
    /* background-color: skyblue; */
  }
  .net-tool-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: white;
    width: 100%;
    padding: 10px 5px;
    /* height: 20px; */
  }
  .link-status-box {
    display: inline-block;
    margin: 0 5px;
  }
  .link-status-box > div {
    width: 15px;
    margin-bottom: 2px;
    border-top-width: 1px;
  }
  .link-solid-border {
    border-style: solid;
  }
  .link-dashed-border {
    border-style: dashed;
  }
  .green-link {
    border-color: var(--mainGreenColor);
  }
  .blue-link {
    border-color: var(--themeColor);
  }
  .purple-link {
    border-color: var(--mainPurpleColor);
  }
  .network-segment {
    position: sticky;
    /* top: calc(56px + 48px + 20px); */
    z-index: 1;
    width: 100%;
    height: 30px;
    padding: 5px;
    margin: 5px 0;
  }
  .network-segment-name {
    position: absolute;
    left: 42%;
    color: #fff;
  }
  .net-line {
    position: absolute;
    z-index: 0;
  }
  .vertical-line {
    border-left-width: 1px;
  }
  .horizontal-line {
    border-top-width: 1px;
  }
  .solid-line {
    border-style: solid;
  }
  .dashed-line {
    border-style: dashed;
  }
  .manage-net-line {
    border-color: var(--mainGreenColor);
  }
  .data-net-line {
    border-color: var(--themeColor);
  }
  .service-net-line {
    border-color: var(--mainPurpleColor);
  }
  .un-point {
    opacity: 0.2;
  }
  .machine-box {
    width: 260px;
    margin-top: 50px;
    margin-left: 200px;
    padding: 50px 10px;
    height: auto;
    /* background-color: #fff; */
  }
  .machine {
    position: relative;
    width: 240px;
    height: 70px;
    border: 1px solid #999;
    border-radius: 4px;
    padding: 0 5px;
    margin-bottom: 50px;
  }
  .small-graphical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 10px;
    height: 30px;
    border: .5px solid #000;
    background-color: #d8d8d8;
  }
  .left-graphical {
    left: -11px;
  }
  .right-graphical {
    right: -11px;
  }
  .small-graphical > .small-circle {
    width: 5px;
    height: 5px;
    border: .5px solid #000;
    border-radius: 50%;
    background-color: #fff;
  }
  .machine-detail {
    margin-top: 15px;
  }
  .node-name {
    margin-right: 5px;
    color: var(--themeColor);
  }
  .node-status {
    display: inline-block;
    height: 20px;
    padding: 0 5px;
    border-radius: 5px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
  }
  .status-success {
    background-color: var(--mainGreenColor);
  }
  .status-error {
    background-color: var(--mainRedColor);
  }
  .interface-box {
    position: relative;
    display: flex;
    justify-content: center;
  }
  .interface {
    position: relative;
    display: inline-block;
    /* width: 30px; */
    /* height: 18px; */
    margin: 0 5px;
  }
  .interface-top-box {
    width: 30px;
    height: 10px;
    border: 1px solid #000;
    background-color: #d8d8d8;
  }
  .interface-bottom-box {
    position: absolute;
    bottom: -5px;
    width: 20px;
    height: 6px;
    margin-left: 5px;
    border: 1px solid #000;
    border-top: 1px solid #d8d8d8;
    background-color: #d8d8d8;
  }
  .interface-sm {
    position: relative;
    display: inline-block;
  }
  .interface-sm-box {
    position: relative;
    display: inline-block;
    scale: 0.6;
  }
  .interface-line {
    position: absolute;
    top: 1px;
    height: 5px;
    border-left: 2px solid #000;
  }
  .interface-line-left {
    left: 8px;
  }
  .interface-line-middle {
    left: 14px;
  }
  .interface-line-right {
    right: 8px;
  }
  ::v-deep.ant-checkbox-inner {
    width: 14px;
    height: 14px;
  }
  .ant-checkbox-wrapper {
    color: #fff;
  }
</style>

verticalNetLine: [//top每条35间隔
        {type:'manage-net-line', left:'20px', top:'76px', height:'400px', isShow: true, mode:'manage'},
        {type:'data-net-line', left:'30px', top:'111px', height:'350px', isShow: true, mode:'data'},
        {type:'service-net-line', left:'40px', top:'146px', height:'250px', isShow: true, mode:'service'},
      ],
      interfaceVerticalNetLine: [
        {type:'manage-net-line', left:'8px', top:'-10px', height:'10px', isShow: true, mode:'manage'},
        {type:'data-net-line', left:'14px', top:'-20px', height:'20px', isShow: true, mode:'data'},
        {type:'service-net-line', left:'20px', top:'-30px', height:'30px', isShow: true, mode:'service'},
      ],
      horizontalLine: [//top每条10间隔
        {type:'manage-net-line', left: '20px', top: '335px', right:'0', isShow: true, mode:'manage'},
        {type:'data-net-line', left: '30px', top: '325px', right:'0', isShow: true, mode:'data'},
        {type:'service-net-line', left: '40px', top: '315px', right:'0', isShow: true, mode:'service'},
      ],
